<template>
  <div>
    <div class="chart" ref="eqruning" style="width:100%; height:27vh"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      data1: [],
      data2: [],
    }
  },
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      },
    },
    watch: {
      data: {
        handler() {
          this.initChart()
        },
        immediate: true,
        deep: true,
      },
    },
    bjindex: {
      type: Number,
      default: 0,
    },
  },
  mounted() {
    this.initChart()
  },

  methods: {
    initChart() {
      const myChart = this.$echarts.init(this.$refs.eqruning)
      const option = {
        series: [
          {
            type: 'gauge',
            min: 0,
            max: 100,
            axisLine: {
              roundCap: true,
              lineStyle: {
                width: 8,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#d9b036'],
                ],
              },
            },
            pointer: {
              itemStyle: {
                color: 'auto',
                // fontSize: this.fitChartSize(15),
              },
            },
            // 仪表盘刻度线相关配置。
            axisTick: {
              show: false,
              distance: -5,
              length: 5,
              lineStyle: {
                color: '#ddd',
                width: 1,
              },
            },
            splitLine: {
              distance: 2,
              length: 4,
              lineStyle: {
                color: '#aaa',
                width: 2,
              },
            },
            axisLabel: {
              color: 'auto',
              distance: 12,
              fontSize: this.fitChartSize(9),
            },
            detail: {
              valueAnimation: true,
              width: 80,
              height: 20,
              lineHeight: 20,
              align: 'center',
              verticalAlign: 'middle',
              offsetCenter: ['0%', '70%'],
              formatter: '{value|{value}}\n{unit|MTBF}',
              color: 'auto',
              rich: {
                value: {
                  fontSize: this.fitChartSize(18),
                  color: '#fff',
                },
                unit: {
                  fontSize: this.fitChartSize(10),
                  color: '#999',
                },
              },
            },
            data: [
              {
                value: Number(this.data.week_oee),
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
}
</script>
<style lang="less">
.eq-title {
  position: absolute;
  right: 6%;
  top: 10px;
  color: #ddd;
  p {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
  .name {
    font-size: 9px;
    width: 60px;
    text-align: right;
  }
  .value {
    flex: 1;
    font-size: 11px;
    color: #1ed3e5;
    padding-left: 5px;
    text-align: left;
  }
}
</style>
